﻿@model List<Fzrain.Web.Models.Lol.ChampionGrowupViewModel>

<div>
    @(Html.Kendo().Chart(Model).Theme("metro")
          .Name("chart_"+Model.First().ChampionId)
          .Title("我的英雄成长")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Top)
          ).ChartArea(area => area.Background("#35393a"))
          .SeriesDefaults(seriesDefaults => seriesDefaults
              .Column().Stack(true)
          ).Events(e => e.SeriesClick("chart_seriesClick"))
          .Series(series =>
          {
              series.Line(m => m.Proficiency).Name("我的表现").Color("#44a1c1").Tooltip(t => t.Template("<div>战斗日期：#=kendo.toString(dataItem.StartTime, 'yyyy年MM月dd日') #</div><div>熟练度：#= dataItem.Proficiency#</div>")).Labels(c=>c.Visible(true).Color("#44a1c1"));
              series.Line((IEnumerable<double>)ViewData[Model.First().ChampionId.ToString()]).Name("全服平均表现：" + ((IEnumerable<double>)ViewData[Model.First().ChampionId.ToString()]).First()).Color("#ef2323").Markers(false).Tooltip(false).Highlight(false);
          })
          .CategoryAxis(axis => axis
                      .Categories("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20").Color("#428bca")
              .MajorGridLines(lines => lines.Visible(false))
          )
          .ValueAxis(axis => axis
              .Numeric().Color("#428bca")
              .MajorGridLines(lines => lines.Visible(false))
          )
          .Tooltip(tooltip => tooltip
              .Visible(true)
              .Format("{0}")
          )  )
    @(Html.Kendo().Window()
        .Name("window_"+ Model.First().ChampionId).Visible(false)
          .Title("战斗详情")
    .Draggable()
    .Modal(true)
    .Width(700).Height(470)
    .Actions(actions => actions.Minimize().Maximize().Close()).Position(a => a.Left(335).Top(100))
    )
</div>

<script type="text/javascript">
  
    function chart_seriesClick(e) {

        var kendoWindow = $("#window_"+@Model.First().ChampionId).data("kendoWindow");
        $.post("/Lol/GetBattleDetail", { GameId: e.dataItem.GameId }, function (data) {
            kendoWindow.content(data);
            kendoWindow.center().open();
        });

    }

</script>